<!DOCTYPE html>
<html class="no-js" lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>JWT完全攻略 - 唐宋缘明卿的博客</title>
	<script>(function(d,e){d[e]=d[e].replace("no-js","js");})(document.documentElement,"className");</script>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	
	<meta name="description" content="">
	<meta name="generator" content="Hugo 0.68.3" />
	
	
	<link rel="dns-prefetch" href="//fonts.googleapis.com">
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">
	<link rel="stylesheet" href="/ghhs_technology_blog/css/style.css">	
	<link rel="stylesheet" type="text/css" href="/ghhs_technology_blog/css/highlight.css">
	
	
	
	<link rel="shortcut icon" href="/ghhs_technology_blog/favicon.ico">
		
	
</head>
<body class="body">
	<div class="container container--outer">
		<header class="header">
	<div class="container">
		<div class="logo">
			<a class="logo__link" href="/ghhs_technology_blog/" title="唐宋缘明卿的博客" rel="home">
			<div class="logo__title">唐宋缘明卿的博客</div>			
				 
			</a>
			
		</div>
		
<nav class="menu">
	<button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
		<span class="menu__btn-title" tabindex="-1">选择</span>
	</button>
	<ul class="menu__list">
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/about/">关于我</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/post/">博客</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/timeline/">时间轴</a>
		</li>
		<li class="menu__item">
			<a class="menu__link" href="/ghhs_technology_blog/resume/">简历</a>
		</li>
	</ul>
</nav>

	</div>
</header>
		<div class="wrapper flex">
			<div class="primary">
			
<main class="main" role="main">
	<article class="post">
		<header class="post__header">
			<h1 class="post__title">JWT完全攻略</h1>
			<div class="post__meta meta">
<div class="meta__item-datetime meta__item">
	<svg class="meta__icon icon icon-time" width="16" height="14" viewBox="0 0 30 28"><path d="M15 0C7 0 1 6 1 14s6 14 14 14 14-6 14-14S23 0 15 0zm0 25C9 25 4 20 4 14S9 3 15 3s11 5 11 11-5 11-11 11zm1-18h-2v8.4l6.8 4.4L22 18l-6-3.8V7z"/></svg>
	<time class="meta__text" datetime="2017-08-04T14:36:41">August 04, 2017</time>
</div>
<div class="meta__item-datetime meta__item">
	<svg class="meta__icon icon icon-time" width="16" height="14" viewBox="0 0 30 28"><path d="M15 0C7 0 1 6 1 14s6 14 14 14 14-6 14-14S23 0 15 0zm0 25C9 25 4 20 4 14S9 3 15 3s11 5 11 11-5 11-11 11zm1-18h-2v8.4l6.8 4.4L22 18l-6-3.8V7z"/></svg>
	<time class="meta__text">5 分钟</time>
</div></div>
		</header>
<div class="content post__content clearfix">
			<h3 id="一句话介绍jwt">一句话介绍JWT！</h3>
<p>通俗来讲，JWT 是一个含签名并携带用户相关信息的加密串，页面请求校验登录接口时，请求头中携带 JWT 串到后端服务，后端通过签名加密串匹配校验，保证信息未被篡改。校验通过则认为是可靠的请求，将正常返回数据。</p>
<h3 id="啥时候用jwt啊">啥时候用JWT啊</h3>
<ul>
<li>授权！基本上遇到单点登录问题，JWT就完了！毕竟用起来轻便、开销小，而且服务端无需记录用户状态，用的也是十分的广泛。</li>
<li>信息交换：因为JWT可以签名，例如使用公钥-私钥对儿，可以确定请求方是合法的，同时由于使用了负载计算签名，也可以验证内容是否被篡改。</li>
</ul>
<h3 id="jwt的组成部分">JWT的组成部分</h3>
<p>一个完整的JWT=头信息+有效载荷+签名这三部分组成，中间的加号换成<code>(.)</code>进行分割；</p>
<ol>
<li>header(头信息)：令牌类型[jwt]+散列算法（HMAC/RSASSA/RSASSA-PSS)</li>
</ol>
<pre><code>{
  'typ': 'JWT',
  'alg': 'HS256'
}
</code></pre><p>接着进行进行base64加密（该加密是可以对称解密的),就构成了第一部分.</p>
<pre><code>eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
</code></pre><ol start="2">
<li>payload(有效载荷)的三部分:</li>
</ol>
<pre><code>1 ==&gt; 标准中注册的声明
2 ==&gt; 公共的声明
3 ==&gt; 私有的声明
</code></pre><p>标准中注册的声明 (建议但不强制使用) ：</p>
<ul>
<li>iss: jwt签发者</li>
<li>sub: jwt所面向的用户</li>
<li>aud: 接收jwt的一方</li>
<li>exp: jwt的过期时间，这个过期时间必须要大于签发时间</li>
<li>nbf: 定义在什么时间之前，该jwt都是不可用的.</li>
<li>iat: jwt的签发时间</li>
<li>jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。</li>
</ul>
<p>公共的声明 ：
公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.</p>
<p>私有的声明 ：
私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息</p>
<p>定义一个payload：</p>
<pre><code>{
  &quot;sub&quot;: &quot;1234567890&quot;,
  &quot;name&quot;: &quot;John Doe&quot;,
  &quot;admin&quot;: true
}
加密后就得到了  
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9
</code></pre><p>也就是JWT的第二部分</p>
<ol start="3">
<li>signature(签名信息) 的三部分：</li>
</ol>
<pre><code>1 ==&gt; header (base64后的)
2 ==&gt; payload (base64后的)
3 ==&gt; secret
</code></pre><p>这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">encodedString <span style="color:#f92672">=</span> base64UrlEncode(header) <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;.&#39;</span> <span style="color:#f92672">+</span> base64UrlEncode(payload)
signature <span style="color:#f92672">=</span> HMACSHA256(encodedString, <span style="color:#e6db74">&#39;secret&#39;</span>);
<span style="color:#75715e">#TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</span>
</code></pre></div><p>于是我们获得了一个最终的字符串（JWT完全体）
<code>eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</code></p>
<h3 id="实际项目中的应用分析">实际项目中的应用分析</h3>
<p>首先，我们大致的看一下流程图<br>
<img src="https://gitee.com/gaohaihang/ghhs_technology_blog/raw/master/img/res/JWT%E6%B5%81%E7%A8%8B.jpg" alt="jwt-flow-chart"><br>
从流程图中呢，我们可以很清晰的看出JWT的基于TOKEN的鉴权机制。<br>
这个token必须要在每次请求时传递给服务端，它应该保存在请求头里， 另外，服务端要支持CORS(跨来源资源共享)策略，一般我们在服务端这么做就可以了Access-Control-Allow-Origin: *。</p>
<pre><code>用户使用用户名密码来请求服务器==&gt;
服务器进行验证用户的信息==&gt;
服务器通过验证发送给用户一个token==&gt;
客户端存储token，并在每次请求时附送上这个token值==&gt;
服务端验证token值，并返回数据
</code></pre><p>传统的session认证是每个用户经过我们的应用认证之后，我们的应用都要在服务端做一次记录，以方便用户下次请求的鉴别，通常而言session都是保存在内存中，而随着认证用户的增多，服务端的开销会明显增大。<br>
同时，在多台服务器共同工作时，为了减轻压力，可能会互相切换服务器，而只要用户信息不在这台服务器的时候，就需要再次进行验证，这样子用户便需要频繁的进行认证，体验极差。<br>
还有不得不防范的一点是，在传统的认证中，是基于cookie来进行用户识别的，如果cookie被截获，用户就会很容易遭到跨站请求伪造的攻击。</p>
<h3 id="总结一下">总结一下</h3>
<h4 id="优点">优点</h4>
<ul>
<li>因为json的通用性，所以JWT是可以进行跨语言支持的，而且实现方式简单，操作便捷，能够快速实现，像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用。</li>
<li>因为有了payload部分，所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。</li>
<li>便于传输，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。</li>
<li>它不需要在服务端保存会话信息, 所以它易于应用的扩展
安全相关。</li>
<li>由于服务端不存储用户状态信息，因此大用户量，对后台服务也不会造成压力。</li>
</ul>
<h4 id="缺点">缺点</h4>
<ul>
<li>跨域实现相对比较麻烦，安全性也有待探讨。</li>
<li>因为 JWT 令牌返回到页面中，可以使用 js 获取到，如果遇到 XSS 攻击令牌可能会被盗取，在 JWT 还没超时的情况下，就会被获取到敏感数据信息。（这一点跟cookie/session是一样的，获取了sessionID人家就能盗用你的身份）</li>
<li>关于注销和修改密码<br>
这一点上cookie/session是优势，因为人家只需要服务器清空session即可，但是因为JWT的无状态，虽然客户端删除了jwt，但由于jwt是由服务端计算而得来，还处在有效期内，就会造成一个假注销的情况，也就是说此时携带jwt还是可以访问你的系统。</li>
<li>续签问题<br>
在这一点上，cookie/session算是搬得一城。传统的 cookie 续签方案一般都是框架自带的，session 有效期 30 分钟，30 分钟内如果有访问，session 有效期被刷新至 30 分钟。而 jwt 本身的 payload 之中也有一个 exp 过期时间参数，来代表一个 jwt 的时效性，而 jwt 想延期这个 exp 就有点身不由己了，因为 payload 是参与签名的，一旦过期时间被修改，整个 jwt 串就变了，jwt的特性就是这样……</li>
</ul>

		</div>
		
	</article>
</main>







			</div>
			<aside class="sidebar"><div class="widget-search widget">
	<form class="widget-search__form" role="search" method="get" action="https://google.com/search">
		<label>
			<input class="widget-search__field" type="search" placeholder="搜索..." value="" name="q" aria-label="搜索...">
		</label>
		<input class="widget-search__submit" type="submit" value="Search">
		<input type="hidden" name="sitesearch" value="/ghhs_technology_blog/" />
	</form>
</div>
<div class="widget-recent widget">
	<h4 class="widget__title">近期文章</h4>
	<div class="widget__content">
		<ul class="widget__list">
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5%E7%89%88/">JWT完全攻略</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/%E9%82%A3%E4%BA%9B%E5%B9%B4%E8%B8%A9%E8%BF%87%E7%9A%84%E5%9D%91/">踩过的坑，流过的泪</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/github%E6%90%9C%E7%B4%A2%E6%8A%80%E5%B7%A7/">Github搜索技巧汇总</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/">单例模式&amp;实现方法&amp;避雷</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/%E5%88%9D%E8%AF%86celery%E5%BC%82%E6%AD%A5%E9%82%AE%E7%AE%B1%E9%AA%8C%E8%AF%81/">初识Celery&amp;异步邮箱验证</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/%E5%88%9D%E8%AF%86scrapy%E6%A1%86%E6%9E%B6/">初识Scrapy框架</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/git%E4%B9%8B%E4%B8%80%E9%94%AE%E4%B8%89%E8%BF%9E%E5%90%88%E4%BD%9C%E5%BC%80%E5%8F%91/">Git之一键三连&amp;合作开发</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/python%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6/">Python垃圾回收机制</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/python23%E7%9A%84%E5%8C%BA%E5%88%AB/">python2&amp;3的区别</a></li>
			<li class="widget__item"><a class="widget__link" href="/ghhs_technology_blog/post/one/">HELLO WORLD!</a></li>
		</ul>
	</div>
</div>
<div class="widget-social widget">
	<h4 class="widget-social__title widget__title">社群</h4>
	<div class="widget-social__content widget__content">
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Facebook" rel="noopener noreferrer" href="https://facebook.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-facebook" viewBox="0 0 352 352" width="24" height="24" fill="#fff"><path d="m0 32v288c0 17.5 14.5 32 32 32h288c17.5 0 32-14.5 32-32v-288c0-17.5-14.5-32-32-32h-288c-17.5 0-32 14.5-32 32zm320 0v288h-83v-108h41.5l6-48h-47.5v-31c0-14 3.5-23.5 23.5-23.5h26v-43.5c-4.4-.6-19.8-1.5-37.5-1.5-36.9 0-62 22.2-62 63.5v36h-42v48h42v108h-155v-288z"/></svg>
				<span>Facebook</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Instagram" rel="noopener noreferrer" href="https://www.instagram.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-instagram" viewBox="0 0 256 256" width="24" height="24" fill="#fff"><circle cx="193" cy="59" r="15"/><path fill-rule="evenodd" d="M101 0h54c41 0 58.4 3.9 74.5 17C256.2 37.5 256 74.8 256 97.7v60c0 26.7 0 60.4-26.5 81.4-16 13.4-33.5 16.9-74.5 16.9h-54c-41 0-57.5-3.5-74.5-16.9C1 218.9.5 186.3.1 160.5L0 155V97.7c0-23-.2-60.2 26.5-80.7C45 2 60 0 101 0zm4.9 23h44.3c45.8 0 58.3 3.5 70.3 17.5 11.8 13.2 12 30.1 12.5 62.9V156c.2 20.8.3 45.8-12.5 59.5-12 14-24.5 17.5-70.3 17.5h-44.3c-45.9 0-57.3-3.5-70.4-17.5-12.2-13-12.3-36.5-12.4-56.7v-55.6c.4-32.6.7-49.6 12.4-62.7C48 26.5 60 23 105.9 23zm19.6 144.5a42 42 0 1 0 0-84 42 42 0 0 0 0 84zm0 22.5a64.5 64.5 0 1 0 0-129 64.5 64.5 0 0 0 0 129z"/></svg>
				<span>Instagram</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Telegram" rel="noopener noreferrer" href="https://t.me/2333333" target="_blank">
				<svg class="widget-social__link-icon icon-telegram" viewBox="0 0 132 110" width="24" height="24"><path fill="#ddd" d="M50 103c-4 0-3-1-5-5L34 60l88-52"/><path fill="#aaa" d="M50 103c3 0 4-1 6-3l16-16-20-12"/><path fill="#fff" d="M52 72l48 36c6 3 10 2 11-5l20-93c2-8-3-11-8-9L7 45c-8 4-8 8-1 10l29 9 69-43c3-2 6-1 4 1"/></svg>
				<span>Telegram</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="GitHub" rel="noopener noreferrer" href="https://github.com/username" target="_blank">
				<svg class="widget-social__link-icon icon-github" viewBox="0 0 384 374" width="24" height="24" fill="#fff"><path d="m192 0c-106.1 0-192 85.8-192 191.7 0 84.7 55 156.6 131.3 181.9 9.6 1.8 13.1-4.2 13.1-9.2 0-4.6-.2-16.6-.3-32.6-53.4 11.6-64.7-25.7-64.7-25.7-8.7-22.1-21.3-28-21.3-28-17.4-11.9 1.3-11.6 1.3-11.6 19.3 1.4 29.4 19.8 29.4 19.8 17.1 29.3 44.9 20.8 55.9 15.9 1.7-12.4 6.7-20.8 12.2-25.6-42.6-4.8-87.5-21.3-87.5-94.8 0-20.9 7.5-38 19.8-51.4-2-4.9-8.6-24.3 1.9-50.7 0 0 16.1-5.2 52.8 19.7 15.3-4.2 31.7-6.4 48.1-6.5 16.3.1 32.7 2.2 48.1 6.5 36.7-24.8 52.8-19.7 52.8-19.7 10.5 26.4 3.9 45.9 1.9 50.7 12.3 13.4 19.7 30.5 19.7 51.4 0 73.7-44.9 89.9-87.7 94.6 6.9 5.9 13 17.6 13 35.5 0 25.6-.2 46.3-.2 52.6 0 5.1 3.5 11.1 13.2 9.2 76.2-25.5 131.2-97.3 131.2-182 0-105.9-86-191.7-192-191.7z"/></svg>
				<span>GitHub</span>
			</a>
		</div>
		<div class="widget-social__item widget__item">
			<a class="widget-social__link widget__link btn" title="Email" href="mailto:g617415200@gmail.com">
				<svg class="widget-social__link-icon icon-mail" viewBox="0 0 416 288" width="24" height="24" fill="#fff"><path d="m0 16v256 16h16 384 16v-16-256-16h-16-384-16zm347 16-139 92.5-139-92.5zm-148 125.5 9 5.5 9-5.5 167-111.5v210h-352v-210z"/></svg>
				<span>g617415200@gmail.com</span>
			</a>
		</div>
	</div>
</div>

</aside>
		</div>
		<footer class="footer">
	<div class="container footer__container flex">
		
		<div class="footer__copyright">
			&copy; 2020 唐宋缘明卿的博客.
			<span class="footer__copyright-credits">使用 <a href="https://gohugo.io/" rel="nofollow noopener" target="_blank">Hugo</a> 技术与 <a href="https://github.com/kingfsen/Mainroad/" rel="nofollow noopener" target="_blank">Mainroad</a>主题</span>
		</div>
	</div>
</footer>
	</div>
<script async defer src="/ghhs_technology_blog/js/menu.js"></script>
<script async src="/ghhs_technology_blog/js/highlight.js"></script>

<script type="text/javascript">
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())
</script>

</body>
</html>